<template>
	<el-dialog
		v-dialogDrag
		class="setting-dialog"
		title=""
		:visible.sync="visible"
		width="480px"
		:before-close="onClose"
		:close-on-click-modal="false"
		:close-on-press-escape="true"
		center>

		<!-- 自定义标题栏 -->
		<div slot="title" class="dialog-header">
			<div class="header-content">
				<i class="fas fa-cog header-icon"></i>
				<span class="header-title">个人设置</span>
			</div>
		</div>

		<div class="setting-content">
			<!-- 用户信息展示区域 -->
			<div class="user-info-section">
				<div class="avatar-section">
					<div class="avatar-container" @click="viewAvatar">
						<img v-if="userInfo.headImage" :src="userInfo.headImage" class="user-avatar" alt="用户头像">
						<div v-else class="avatar-placeholder">
							<i class="fas fa-user"></i>
						</div>
						<div class="avatar-overlay">
							<i class="fas fa-search-plus"></i>
							<span>查看头像</span>
						</div>
					</div>
				</div>

				<div class="info-grid">
					<div class="info-item">
						<div class="info-label">
							<i class="fas fa-user-tag"></i>
							<span>用户名</span>
						</div>
						<div class="info-value">{{ userInfo.userName || '未设置' }}</div>
					</div>

					<div class="info-item">
						<div class="info-label">
							<i class="fas fa-signature"></i>
							<span>昵称</span>
						</div>
						<div class="info-value">{{ userInfo.nickName || '未设置' }}</div>
					</div>

					<div class="info-item">
						<div class="info-label">
							<i :class="genderIcon.icon" :style="{ color: genderIcon.color }"></i>
							<span>性别</span>
						</div>
						<div class="info-value">{{ genderText }}</div>
					</div>

					<div class="info-item full-width">
						<div class="info-label">
							<i class="fas fa-quote-left"></i>
							<span>个性签名</span>
						</div>
						<div class="info-value signature">{{ userInfo.signature || '这个人很懒，什么都没有留下...' }}</div>
					</div>
				</div>
			</div>

			<!-- 编辑提示区域 -->
			<div class="edit-hint">
				<div class="hint-content">
					<i class="fas fa-info-circle"></i>
					<span>要修改个人信息，请前往个人资料页面进行编辑</span>
				</div>
			</div>
		</div>

		<span slot="footer" class="dialog-footer">
			<el-button @click="onClose()" class="cancel-btn">
				<i class="fas fa-times"></i>
				关闭
			</el-button>
			<el-button type="primary" @click="goToProfile()" class="edit-btn">
				<i class="fas fa-edit"></i>
				编辑个人信息
			</el-button>
		</span>
	</el-dialog>
</template>

<script>
import { formatGender, getGenderIcon } from '@/utils/im/gender.js';

export default {
	name: "IMSetting",
	data() {
		return {
			userInfo: {}
		}
	},
	computed: {
		/**
		 * 格式化性别文本
		 */
		genderText() {
			return formatGender(this.userInfo.sex);
		},

		/**
		 * 获取性别图标信息
		 */
		genderIcon() {
			return getGenderIcon(this.userInfo.sex);
		}
	},
	methods: {
		/**
		 * 关闭设置弹窗
		 */
		onClose() {
			this.$emit("close");
		},

		/**
		 * 跳转到个人资料页面进行编辑
		 */
		goToProfile() {
			// 关闭当前弹窗
			this.onClose();

			// 跳转到个人资料页面
			this.$router.push('/user/profile');

			// 显示提示信息
			this.$message.success('正在跳转到个人资料页面...');
		},

		/**
		 * 查看头像大图
		 */
		viewAvatar() {
			if (this.userInfo.headImage) {
				// 触发全局事件，打开头像查看器
				this.$eventBus.$emit('openFullImage', this.userInfo.headImage);
			} else {
				this.$message.info('暂无头像');
			}
		}
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		visible: function (newVal) {
			if (newVal) {
				// 弹窗打开时，获取最新的用户信息
				let userInfo = this.userStore.userInfo;
				this.userInfo = userInfo ? JSON.parse(JSON.stringify(userInfo)) : {};
			}
		}
	}
}
</script>

<style lang="scss" scoped>
@use "@/styles/variables.scss" as *;

.setting-dialog {
	// === 弹窗基础样式 ===
	:deep(.el-dialog) {
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
		background: var(--im-bg-primary, #ffffff);
		border: 1px solid var(--im-border-color, rgba(0, 0, 0, 0.1));
	}

	:deep(.el-dialog__header) {
		padding: 0;
		border-bottom: 1px solid var(--im-border-color, rgba(0, 0, 0, 0.1));
		background: var(--im-bg-tertiary, #ffffff);
	}

	:deep(.el-dialog__body) {
		padding: 0;
		background: var(--im-bg-primary, #ffffff);
	}

	:deep(.el-dialog__footer) {
		padding: 20px 24px;
		border-top: 1px solid var(--im-border-color, rgba(0, 0, 0, 0.1));
		background: var(--im-bg-secondary, #f8f9fa);
	}

	// === 自定义标题栏 ===
	.dialog-header {
		padding: 20px 24px;
		background: linear-gradient(135deg, var(--im-color-primary, #409eff) 0%, var(--im-color-primary-light-2, #66b1ff) 100%);
		color: white;

		.header-content {
			display: flex;
			align-items: center;
			gap: 12px;

			.header-icon {
				font-size: 20px;
				opacity: 0.9;
			}

			.header-title {
				font-size: 18px;
				font-weight: 600;
				letter-spacing: 0.5px;
			}
		}
	}

	// === 设置内容区域 ===
	.setting-content {
		padding: 24px;
	}

	// === 用户信息展示区域 ===
	.user-info-section {
		margin-bottom: 24px;

		.avatar-section {
			display: flex;
			justify-content: center;
			margin-bottom: 24px;

			.avatar-container {
				position: relative;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
				transition: all 0.3s ease;
				cursor: pointer;

				&:hover {
					transform: scale(1.05);
					box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);

					.avatar-overlay {
						opacity: 1;
					}
				}

				.user-avatar {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: transform 0.3s ease;
				}

				.avatar-placeholder {
					width: 100%;
					height: 100%;
					background: linear-gradient(135deg, var(--im-color-primary-light-7, #c6e2ff) 0%, var(--im-color-primary-light-5, #85c1ff) 100%);
					display: flex;
					align-items: center;
					justify-content: center;
					color: var(--im-color-primary, #409eff);
					font-size: 36px;
				}

				.avatar-overlay {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, 0.6);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					opacity: 0;
					transition: opacity 0.3s ease;
					color: white;
					font-size: 12px;

					i {
						font-size: 20px;
						margin-bottom: 4px;
					}
				}
			}
		}

		.info-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;

			.info-item {
				background: var(--im-bg-secondary, #f8f9fa);
				border: 1px solid var(--im-border-color-light, rgba(0, 0, 0, 0.05));
				border-radius: 12px;
				padding: 16px;
				transition: all 0.3s ease;

				&:hover {
					background: var(--im-bg-hover, rgba(64, 158, 255, 0.05));
					border-color: var(--im-color-primary-light-6, #b3d8ff);
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
				}

				&.full-width {
					grid-column: 1 / -1;
				}

				.info-label {
					display: flex;
					align-items: center;
					gap: 8px;
					margin-bottom: 8px;
					color: var(--im-text-color-secondary, #6c757d);
					font-size: 13px;
					font-weight: 500;

					i {
						font-size: 14px;
						color: var(--im-color-primary, #409eff);
						width: 16px;
						text-align: center;
					}
				}

				.info-value {
					color: var(--im-text-color-primary, #333333);
					font-size: 15px;
					font-weight: 500;
					line-height: 1.4;
					word-break: break-word;

					&.signature {
						font-style: italic;
						color: var(--im-text-color-secondary, #6c757d);
						line-height: 1.5;
					}
				}
			}
		}
	}

	// === 编辑提示区域 ===
	.edit-hint {
		background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(64, 158, 255, 0.04) 100%);
		border: 1px solid var(--im-color-primary-light-8, #e1f3ff);
		border-radius: 12px;
		padding: 16px;

		.hint-content {
			display: flex;
			align-items: center;
			gap: 12px;
			color: var(--im-color-primary, #409eff);
			font-size: 14px;
			font-weight: 500;

			i {
				font-size: 16px;
				opacity: 0.8;
			}
		}
	}

	// === 底部按钮 ===
	.dialog-footer {
		display: flex;
		justify-content: flex-end;
		gap: 12px;

		.el-button {
			border-radius: 8px;
			padding: 10px 20px;
			font-weight: 500;
			transition: all 0.3s ease;

			i {
				margin-right: 6px;
			}

			&.cancel-btn {
				background: transparent;
				border-color: var(--im-border-color, rgba(0, 0, 0, 0.1));
				color: var(--im-text-color-secondary, #6c757d);

				&:hover {
					background: var(--im-bg-hover, rgba(0, 0, 0, 0.05));
					border-color: var(--im-text-color-secondary, #6c757d);
					color: var(--im-text-color-primary, #333333);
					transform: translateY(-1px);
				}
			}

			&.edit-btn {
				background: linear-gradient(135deg, var(--im-color-primary, #409eff) 0%, var(--im-color-primary-light-1, #53a8ff) 100%);
				border-color: var(--im-color-primary, #409eff);
				color: white;
				box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);

				&:hover {
					background: linear-gradient(135deg, var(--im-color-primary-light-1, #53a8ff) 0%, var(--im-color-primary-light-2, #66b1ff) 100%);
					border-color: var(--im-color-primary-light-1, #53a8ff);
					transform: translateY(-2px);
					box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
				}

				&:active {
					transform: translateY(0);
				}
			}
		}
	}
}

// === 深色模式适配 ===
:root[data-theme='dark'] {
	.setting-dialog {
		:deep(.el-dialog) {
			background: var(--im-bg-primary);
			border-color: var(--im-border-color);
		}

		:deep(.el-dialog__header) {
			background: var(--im-bg-tertiary);
			border-bottom-color: var(--im-border-color);
		}

		:deep(.el-dialog__body) {
			background: var(--im-bg-primary);
		}

		:deep(.el-dialog__footer) {
			background: var(--im-bg-secondary);
			border-top-color: var(--im-border-color);
		}

		.dialog-header {
			background: linear-gradient(135deg, var(--im-color-primary-dark-1) 0%, var(--im-color-primary) 100%);
		}

		.user-info-section {
			.avatar-container {
				.avatar-placeholder {
					background: linear-gradient(135deg, var(--im-color-primary-dark-1) 0%, var(--im-color-primary) 100%);
					color: white;
				}
			}

			.info-grid {
				.info-item {
					background: var(--im-bg-tertiary);
					border-color: var(--im-border-color);

					&:hover {
						background: var(--im-bg-hover);
						border-color: var(--im-color-primary);
					}

					.info-label {
						color: var(--im-text-color-secondary);
					}

					.info-value {
						color: var(--im-text-color-primary);

						&.signature {
							color: var(--im-text-color-secondary);
						}
					}
				}
			}
		}

		.edit-hint {
			background: rgba(64, 158, 255, 0.1);
			border-color: var(--im-color-primary-dark-1);

			.hint-content {
				color: var(--im-color-primary-light-2);
			}
		}

		.dialog-footer {
			.el-button {
				&.cancel-btn {
					border-color: var(--im-border-color);
					color: var(--im-text-color-secondary);

					&:hover {
						background: var(--im-bg-hover);
						border-color: var(--im-text-color-secondary);
						color: var(--im-text-color-primary);
					}
				}

				&.edit-btn {
					background: linear-gradient(135deg, var(--im-color-primary) 0%, var(--im-color-primary-light-1) 100%);
					box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);

					&:hover {
						background: linear-gradient(135deg, var(--im-color-primary-light-1) 0%, var(--im-color-primary-light-2) 100%);
						box-shadow: 0 6px 16px rgba(64, 158, 255, 0.3);
					}
				}
			}
		}
	}
}
</style>